const extractPlugin=require('extract-text-webpack-plugin');
const rule={};//新建需要抛出的对象,即模块
//配置属性规则,另一个文件引入的模块属性
rule.rules=[
    /**
    //处理css,直接打包的配置
    {
        //正则匹配找到要处理的文件扩展名(css文件)
        test:/\.css$/,
        //使用那些loader
        use:['style-loader','css-loader']
    },
     */

    // 分离css的配置,使用分离插件处理,避免直接打包到js文件
    {
        test:/\.css$/,
        use: extractPlugin.extract({
            fallback:"style-loader",
            use:["css-loader","postcss-loader"]
        })
    },
    //处理图片
    {
        test:/\.(png|jpg|gif)/,
        use:[
            {
                loader:'url-loader',
                options:{
                    //设置limit大小,图片大于5000,调用file-loader,copy到对应路径,小于转成dataURL
                    limit:5000,
                    outputPath:'images/'
                }
            }
        ]

    },
    //处理html中引用图片
    {
        test:/\.(htm|html)$/i,
        use:['html-withimg-loader']

    },
    /**处理LESS打包,loader必须按此顺序写,less最终还是会转换为css
    {
        test:/\.less$/,
        use:[{
            loader:'style-loader'
        },{
            loader:'css-loader'
        },{
            loader:'less-loader'
        }]
    }*/
    //处理less分离,分离到plugins中配置的目标文件中,使用css的分离插件
    {
        test:/\.less$/,
        use: extractPlugin.extract({
            fallback:"style-loader",
            use:[{
                loader:'css-loader'
            },{
                loader:"less-loader"
            }]
        })
    },
    //处理sass打包,scss高亮显示
    {
        test:/\.scss$/,
        use:[{
            loader:'style-loader'
        },{
            loader:'css-loader'
        },{
            loader:'sass-loader'
        }]

    },
    //es6语法babel转换
    {
        test:/\.js$/,
        use:{
            loader:'babel-loader',
            options:{
                //解析配置
                presets:[
                    "es2015"  //es6
                ]
            }
        },
        //排除安装插件的目录
        exclude:/node_modules/
    }
];
module.exports=rule;